<template>
  <view>
    <TopBar title="兑换" titleColor="#ffffff"/>

    <view class="info">
      <view class="label">金币余额(币)</view>
      <view class="value">{{userInfo.balance}}</view>
    </view>

    <view class="kuang">
      <view class="kuangr">
        <input v-model="value" type="number" placeholder="请输入兑换的金币数量" />
      </view>
      <view class="kuangl">
        <view class="xian">|</view>
        <view class="money">￥ {{money}}</view>
      </view>
    </view>
    <view class="ratio">兑换比例：1：{{withdrawalRatio}}</view>

    <view class="btn" @click="btnclick">提交</view>
  </view>
</template>
<script>
import TopBar from "../../components/TopBar.vue";
import {mapActions, mapMutations} from 'vuex'
import {Api} from "../../service/api";

export default {
  name: "conversion",
  components: {TopBar},
  data(){
    return {
      userInfo: {},
      value: '',
      withdrawalRatio: 0,
    }
  },
  computed: {
    money(){
      return (this.value / this.withdrawalRatio).toFixed(2)
    }
  },
  methods: {
    ...mapActions('userInfo', ['getInfoMethod']),
    ...mapActions('appInfo', ['getAppConfigMethod', 'getAppInfoMethod']),
    ...mapMutations('userInfo', ['setInfoMethod']),
    async btnclick(){
      if(this.value.trim().length === 0){
        uni.showToast({
          title: '请输入兑换的金币数量',
          icon: 'none'
        })
        return
      }
      if(this.userInfo.balance < this.value){
        uni.showToast({
          title: '金币余额不足',
          icon: 'none'
        })
        return
      }
      if(this.value < 100){
        uni.showToast({
          title: '最近提现金币不能低于100',
          icon: 'none'
        })
        return
      }
      uni.showLoading();
      let res = await Api.conversion(this.value)
      this.value = ''
      this.userInfo.balance = (await Api.getUserBean()).data // 获取最新金币余额
      this.userInfo.money = (await Api.getUserMoney()).data // 获取最新现金余额
      this.setInfoMethod(this.userInfo)
      uni.showToast({
        title: '兑换成功',
        icon: 'success'
      })
      uni.hideLoading()
    }
  },
  async onLoad() {
    this.userInfo = await this.getInfoMethod()
    const data = await this.getAppConfigMethod()
    this.withdrawalRatio = data.withdrawalRatio
  },
}
</script>

<style>
page{
  background: url("/static/theater/conversionBg.png") no-repeat;
  background-size: 100% 100%;
}
</style>

<style scoped lang="scss">
  .info{
    color: #ffffff;
    margin-top: 160rpx;
    margin-left: 40rpx;

    .label{
      margin-bottom: 10rpx;
      font-size: 30rpx;
    }

    .value{
      font-size: 40rpx;
      font-weight: 700;
    }
  }

  .kuang{
    background-color: #FFFFFF;
    padding: 35rpx 20rpx;
    display: flex;
    align-items: center;
    margin: 80rpx 40rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: 20rpx;
    border: 2rpx solid #E4E3E3;

    .kuangl{
      width: 200rpx;
      display: flex;
      justify-content: space-around;
      .xian{
        margin: 0 26rpx;
      }
      .money{
        color: #878787;
      }
    }
  }

  .ratio{
    margin-left: 40rpx;
    margin-top: 20rpx;
    color: #878787;
    font-size: 28rpx;
  }

  .btn{
    width: 580rpx;
    height: 88rpx;
    background-color: #E81F4B;
    color: #FFFFFF;
    text-align: center;
    line-height: 88rpx;
    border-radius: 208rpx;
    margin: 80rpx auto 0;
  }
</style>
